<template>
	<view class="page-container">
		<view class="main-content">
			<uni-section type="line" title="设备id">
				<view class="main-content__value">
					{{detail.deviceId}}
				</view>
			</uni-section>
			<uni-section type="line" title="原始设备编号">
				<view class="main-content__value">
					{{detail.deviceCode}}
				</view>
			</uni-section>
			<uni-section type="line" title="绑定住户信息">
				<view class="main-content__value">
					<view class="bind-line" v-if="detail.buildingInfo">
						<text>{{ detail.buildingInfo.buildingNo }}号楼-{{ detail.buildingInfo.unit }}单元-{{ detail.buildingInfo.floor }}层-{{ detail.buildingInfo.door }}门</text>
						<uni-tag text="更改绑定" type="primary" @click="bindClick"></uni-tag>
					</view>
					<view class="bind-line" v-else>
						<text class="tip-text" style="color: #999;">未绑定住户</text>
						<uni-tag text="去绑定" type="primary" @click="bindClick"></uni-tag>
					</view>
				</view>
			</uni-section>
			<uni-section type="line" title="设备类型">
				<view class="main-content__value">
					{{ getLabelWithDict('device_type',detail.deviceType) }}
				</view>
			</uni-section>
			<!-- <uni-section type="line" title="采集周期">
				<view class="main-content__value">
					{{ getLabelWithDict('device_collect_date',detail.collectCycle) }}
				</view>
			</uni-section> -->
			<uni-section type="line" title="设备状态">
				<view class="main-content__value">
					{{ getLabelWithDict('device_status',detail.deviceStatus) }}
				</view>
			</uni-section>
			<uni-section type="line" title="激活时间">
				<view class="main-content__value">
					{{ detail.activateTime?detail.activateTime:'未激活' }}
				</view>
			</uni-section>
			<uni-section type="line" title="激活者">
				<view class="main-content__value">
					{{ detail.activateBy?detail.activateBy:'-' }}
				</view>
			</uni-section>
		</view>
		<view class="footer-line" v-if="detail.buildingInfo">
			<view class="unbind-btn" @click="unbindTheDevice">解绑</view>
		</view>
	</view>
</template>

<script>
	import {
		getDeviceDetailWithCode,
		bindDeviceToBuilding,
		unbindDevice
	} from '@/api/device/device'
	export default {
		data() {
			return {
				detail: {},
				dictTypes: ['device_collect_date', 'device_type', 'device_status'],
				dictResult:{}
			}
		},
		onLoad(options) {
			const code = options.code
			this.searchDeviceWithCode(code)
		},
		created() {
			uni.$on('device-select-door',(res) => {
				this.handleBindDeviceToDoor(res)
			})
		},
		beforeDestroy() {
			uni.$off('device-select-door')
		},
		methods: {
			searchDeviceWithCode(code) {
				if (!code) {
					return
				}
				this.$modal.loading("查询中...")
				this.dictsGet()
				getDeviceDetailWithCode(code).then(res => {
					if (res.data) {
						this.detail = res.data
					} else {
						this.$modal.msgError('未查到设备信息')
					}
				}).finally(() => this.$modal.closeLoading())
			},
			bindClick(){
				console.log('sss');
				this.$tab.navigateTo('/pages/work/device-detail/select-door')
			},
			handleBindDeviceToDoor(item){
				console.log(item);
				setTimeout(()=>{
					uni.showModal({
						title:'提示',
						content:`确定绑定到'${ item.buildingNo }号楼-${ item.unit }单元-${ item.floor }层-${ item.door }门'?`,
						success: (res) => {
							if (res.confirm){
								const params = {
									housingId:item.housingId,
									buildingId:item.buildingId,
									deviceCode:this.detail.deviceCode
								}
								bindDeviceToBuilding(params).then(res => {
									this.searchDeviceWithCode(this.detail.deviceCode)
								})
							}
						}
					})
				},1000)
			},
			async dictsGet() {
				const results = await this.getDictOptions(this.dictTypes)
				const zz = results.map((res, index) => {
					const t = res.map(_ => {
						return {
							label: _.dictLabel,
							value: _.dictValue
						}
					})
					return {
						key: this.dictTypes[index],
						values: t
					}
				}).reduce((acc, item) => {
					acc[item.key] = item.values;
					return acc;
				}, {});
				this.dictResult = zz
			},
			getLabelWithDict(type,value){
				if (this.dictResult[type]){
					const result = this.dictResult[type]
					const item = result.find(_=>_.value == value)
					return item?item.label:'-'
				}
				return '-'
			},
			unbindTheDevice(){
				this.$modal.confirm('确定解绑当前设备吗？').then(() => {
					const params = {
						deviceCode:this.detail.deviceCode
					}
					unbindDevice(params).then(res => {
						this.$modal.showToast('解绑成功')
						setTimeout(()=>{
							this.$tab.navigateBack()
						},1000)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		.main-content {
			background-color: #FFF;
			padding-bottom: 20rpx;
			&::v-deep .uni-section__content-title {
				color:red !important;
				font-size: 30rpx !important;
			}
			&__value {
				padding:0rpx 20rpx;
				font-size: 34rpx;
				.bind-line {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.tip-text {
						width: 75%;
					}
				}
			}
		}
		.footer-line {
			margin-top: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.unbind-btn {
				line-height: 70rpx;
				width: 50%;
				background-color: $uni-color-error;
				color:#FFF;
				text-align: center;
				border-radius: 10rpx;
			}
		}
	}
</style>